<script setup>
  import {ref, reactive} from 'vue'
  let user = reactive({
    username:'',
    userPwd:'',
    intro:'',
    pro:'',

  })
  let hbs = ref([])
  function clearForm() {
    user.username='',
    user.userPwd='',
    user.intro='',
    user.pro=''
    hbs.value.splice(0,hbs.value.length) // 注意 hbs 是 ref 类型的，需要加 value
  }
</script>

<template>
  <div>
    <input type = 'text' v-model = 'user.username'><br>
    <input type = 'text' v-model = 'user.userPwd'><br>
    爱好：
    唱 <input type = 'checkbox' v-model = "hbs" value = 'sing'>
    跳 <input type = 'checkbox' v-model = 'hbs' value = 'dance'>
    rap <input type = 'checkbox' v-model = 'hbs' value = 'rap'>
    <br>
    简介 <textarea v-model="user.intro"></textarea>
    <br>
    籍贯：
    <select v-model = 'user.pro'>
      <option value = '1'>京</option>
      <option value = '2'>津</option>
      <option value = '3'>冀</option>
    </select>
    <button @click="clearForm()">清空</button>
    <br>
    {{user}} <br>
    {{hbs}}
  </div>
</template>

<style scoped>

</style>
